<template>
  <div class="table-pagination no-select">
    <div v-show="selectNumber > 0" class="select-text">
      共选择了<span class="number">{{ selectNumber }}</span>条数据!
    </div>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="pageLayout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'TablePagination'
  , props: {
    selectNumber: {
      type: Number
      , default() {
        return 1
      }
    }
    , currentPage: {
      type: Number
      , default() {
        return 1
      }
    }
    , pageSizes: {
      type: Array
      , default() {
        return this.pageList
      }
    }
    , pageSize: {
      type: Number
      , default() {
        return 10
      }
    }
    , layout: {
      type: String
      , default() {
        return 'total, sizes, prev, pager, next, jumper'
      }
    }
    , total: {
      type: Number
      , default() {
        return 0
      }
    }
    , page: {
      type: Boolean
      , default() {
        return true
      }
    }
  }
  , computed: {
    ...mapGetters([
      'pageList'
    ])

    , pageLayout: {
      get() {
        return this.page ? this.layout : 'total'
      }
    }
  }

  , data() {
    return {
    }
  }
  , methods: {
    handleSizeChange(val) {
      const maxPage = Math.ceil(this.total / val)
      const currentPage = maxPage < this.currentPage ? maxPage : this.currentPage
      this.$emit('handleSizeChange', val, currentPage)
    }

    , handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .complex-table.table-container .table-pagination {
    .el-pagination {
      .btn-prev,
      .btn-next,
      .el-pager li{
        background-color: transparent;
      }
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  $bg: #fff;
  $space: 0.625rem;
  $avatarWidth: 150px;

  .table-pagination {
      $elPaginationHeight: 32px;
      $paginationHeight: 40px;

      position: relative;
      height: $paginationHeight;
      line-height: $paginationHeight;
      padding: 0 $space;
      font-size: 13px;
      background-color: #fafafa;
      color: #606266;
      border-top: 1px solid $--border-color-light;

      .select-text .number {
        color: red;
        padding: 0 calc(#{$space} / 2);
      }

      .el-pagination {
        position: absolute;
        height: $elPaginationHeight;
        line-height: $elPaginationHeight;
        right: $space;
        top: 0;
        margin: calc((#{$paginationHeight} - #{$elPaginationHeight}) / 2) 0;
      }
  }
</style>
